<template>
<div>
  <a-modal
    title="考勤详情"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        
        <a-form-item
          style="display: none;"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input v-decorator="['id']" />
        </a-form-item>

        <a-form-item
          label="考勤组名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入名称" v-decorator="['name', {rules: [{required: true, message: '请输入分类名称！'}]}]" />
        </a-form-item>

        <a-form-item
          label="考勤人员"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
            <a @click="$refs.chuansuo.edit()">设置</a>
        </a-form-item>
        
        <a-form-item
          label="考勤名单"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <span>{{userNames}}</span>
        </a-form-item>

        <a-form-item
          label="考勤开始时间"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-time-picker v-decorator="['startTime', {rules: [{required: true, message: '请选择考勤开始时间！'}]}]" format="HH:mm" />
        
        </a-form-item>
        
        <a-form-item
          label="考勤结束时间"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-time-picker v-decorator="['endTime', {rules: [{required: true, message: '请选择考勤结束时间！'}]}]"  format="HH:mm" />
        
        </a-form-item>

        <a-form-item
          label="考勤日期"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
        <!-- <a-checkbox @change="onChange">
          周一
        </a-checkbox> --> 
        <a-checkbox-group :options="plainOptions"  v-decorator="['defaultVal1',]" @change="oncheckboxChange1" />
        </a-form-item>
        
        <a-form-item
          label="节假日"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          valuePropName="checked"
        >
        <a-checkbox v-decorator="['isExcludingLegalHolidays',]" @change="oncheckboxChange">
          法定节假日自动排休
        </a-checkbox>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
  <chaunsuo ref="chuansuo" @chuansuook="chuansuook" :selectDatas="selectuserids"></chaunsuo>
  </div>
</template>

<script>
  import { editPage } from '@/api/modular/garden/kaoqin'
  import moment from 'moment';
  import chaunsuo from './chaunsuo'
import user from '@/store/modules/user';

  const plainOptions = ['周一', '周二', '周三', '周四', '周五', '周六', '周日', ];
  export default {
    components: {
      chaunsuo,
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        plainOptions,
        options2: ['法定节假日自动排休'],
        defaultVal1: [],
        defaultVal: '',
        users: [],
        userNames: '',
        selectuserids: [],
      }
    },
    mounted(){
      // this.calendarApi = this.$refs.fullCalendar.getApi();
    },
    methods: {
      moment,
      // 初始化方法
      edit (record) {
        this.visible = true;
        this.$nextTick(() => {
          let users = record.users;
          this.users = users;
          let datas = [];
          users.forEach(item => {
            datas.push(item.userName);
            this.selectuserids.push(item.userId)
          })
          let wds = [];
          record.cycleSettings.forEach(item => {
            wds.push(item.name);
          })
          this.userNames = datas.join(',');
          console.log(this.moment(record.startTime, 'HH:mm'), this.moment(record.endTime, 'HH:mm'))
          this.form.setFieldsValue(
            {
              id: record.id,
              name: record.name,
              isExcludingLegalHolidays: record.isExcludingLegalHolidays,
              startTime: this.moment(record.startTime, 'HH:mm'),
              endTime: this.moment(record.endTime, 'HH:mm'),
              defaultVal1: wds,
            }
          )
        })
      },
      oncheckboxChange(val){
        console.log(val)
      },
      oncheckboxChange1(val){
        console.log(this.defaultVal1)
      },
      getTimesData(arr){
        let data = [];
        arr.forEach(element => {
          if(element == '周一'){
            data.push({
              "name": element,
              "periodType": 1
            })
          }else if(element == '周二'){
            data.push({
              "name": element,
              "periodType": 2
            })
          }else if(element == '周三'){
            data.push({
              "name": element,
              "periodType": 3
            })
          }else if(element == '周四'){
            data.push({
              "name": element,
              "periodType": 4
            })
          }else if(element == '周五'){
            data.push({
              "name": element,
              "periodType": 5
            })
          }else if(element == '周六'){
            data.push({
              "name": element,
              "periodType": 6
            })
          }else if(element == '周日'){
            data.push({
              "name": element,
              "periodType": 0
            })
          }
        });
          return data;
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        if(!this.users.length){
          this.$message.error('请选择人员')
          return;
        }
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            values['startTime'] = moment(values.startTime).format('HH:mm')
            values['endTime'] = moment(values.endTime).format('HH:mm')
            let _timesData = this.getTimesData(values.defaultVal1)
            let postData = {
              id: values.id,
              "name": values.name,
              "startTime": values.startTime,
              "endTime": values.endTime,
              "isExcludingLegalHolidays": values.isExcludingLegalHolidays,
              "users": this.users,
              "cycleSettings":_timesData
            }
            console.log(postData)
            
            editPage(postData).then((res) => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('编辑失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      },
      chuansuook(users){
        let usernames = [];
        this.users = users.map(item => {
          usernames.push(item.name)
          return {
            userId: item.id,
            userName: item.name
          }
        })
        this.userNames = usernames.join(',')
      },
    }
  }
</script>

<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
